<template>
	<view>
		<!-- 用户 -->
		<view class="user_info">
			<view class="user_icon">
				<image :src="imgDetali.user.avatar" mode="widthFix"></image>
			</view>
			<view class="user_desc">
				<view class="user_name">{{imgDetali.user.name}}</view>
				<view class="user_time">{{imgDetali.cnTime}}</view>
			</view>
		</view>
		<!-- 高清大图 -->
		<view class="img">
			<swiper-action @swiperAction="handleSwiperAction">
				<image :src="imgDetali.thumb" mode="widthFix"></image>
			</swiper-action>
		</view>
		<!-- 点赞 -->
		<view class="user_rank">
			<view class="rank">
				<text class="iconfont icon-xinaixin">{{ imgDetali.rank}}</text>
			</view>
			<view class="collect">
				<text class="iconfont icon-xinaixin"> 收藏</text>
			</view>
		</view>
		<!-- 专辑 -->
		<view class="album_wrap" v-if="album.length">
			<view class="album_title">相关</view>
			<view class="album_list">
				<view class="album_item" v-for="(item,i) in album" :key="i">
					<view class="album_img">
						<image :src="item.cover" mode="widthFix"></image>
					</view>
					<view class="album_info">
						<view class="info_text">专辑</view>
						<view class="info_name">
							<view class="name">{{item.name}}</view>
							<view class="iconfont icon-right"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 最热评论 -->
		<view class="comment hot" v-if="hot.length">
			<view class="comment_title">
				<text class="iconfont icon-iconfontwoyaofahuo"></text>
				<text class="comment_text">最热评论</text>
			</view>
			<view class="comment_list">
				<view class="comment_item" v-for="(item,i) in hot" :key="i">
					<view class="comment_user_info">
						<image :src="item.user.avatar" :mode="widthFix"></image>
						<view class="comment_user_desc">
							<view class="comment_user_name">{{item.user.name}}</view>
							<view class="comment_time">{{item.cnTime}}</view>
							<view class="comment_content">
								<view class="comment_text">{{item.content}}</view>
								<view class="iconfont icon-xinaixin"> {{item.size}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	    <!-- 最新评论 -->
	    <view class="comment hot" v-if="comment.length">
	    	<view class="comment_title">
	    		<text class="iconfont icon-xiaoxi"></text>
	    		<text class="comment_text">最新评论</text>
	    	</view>
	    	<view class="comment_list">
	    		<view class="comment_item" v-for="(item,i) in comment" :key="i">
	    			<view class="comment_user_info">
	    				<image :src="item.user.avatar" :mode="widthFix"></image>
	    				<view class="comment_user_desc">
	    					<view class="comment_user_name">{{item.user.name}}</view>
	    					<view class="comment_time">{{item.cnTime}}</view>
	    					<view class="comment_content">
	    						<view class="comment_text">{{item.content}}</view>
	    						<view class="iconfont icon-xinaixin"> {{item.size}}</view>
	    					</view>
	    				</view>
	    			</view>
	    			
	    		</view>
	    	</view>
	    </view>
	    <!-- 下载按钮 -->
		<view class="download">
			<view class="download_btn" @click="handleDownLoad">下载图片</view>
		</view>
	</view>
</template>

<script>
	import {swiperAction} from '@/components/swiperAction.vue'
	import moment from 'moment';
	moment.locale("zh-cn")
	export default {
		data() {
			return {
				imgDetali: {},
				album: [],
				hot: [],
				comment: [],
				imgIndex: 0, //当前图标详情的索引  
				imageList: []
			}
		},
		components: {
			swiperAction
		},
		onLoad() {
			console.log(getApp().globalData)
			const {imageList,imgIndex} = getApp().globalData
			this.imgIndex = imgIndex
			this.imageList = imageList;
			this.getDate()
			
		},
		methods: {
			getDate(){
				this.imgDetali = this.imageList[this.imgIndex]
				this.imgDetali.cnTime = moment(this.imgDetali.atime*1000).fromNow();
				//获取图片详情的ID 用于获取数据
				this.getComments(this.imgDetali.id)
			},
			async getComments(id){
				const res = await this.request({
					url: `http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
				})
				console.log(res.data.res)
				
				
				this.album = res.data.res.album;
				this.hot = res.data.res.hot;
				this.comment = res.data.res.comment;
				// 格式化时间
				this.hot.forEach(item => {
					item.cnTime = moment(item.atime*1000).fromNow();
				})
				this.comment.forEach(item => {
					item.cnTime = moment(item.atime*1000).fromNow();
				})
				
			},
			//滑动事件
			handleSwiperAction(e){
				console.log(e)
				if(e.direction === "left"&&this.imgIndex<this.imageList.length - 1){
					this.imgIndex ++;
					this.getDate()
				}else if(e.direction === "right"&&this.imgIndex>0){
					this.imgIndex --;
					this.getDate()
				}else {
					uni.showToast({
						title: '没有数据了',
						icon:"none"
					})
				}
			},
			// 下载图片  方法一
			async handleDownLoad(){
				// uni.downloadFile()
				uni.showLoading({
					title:'下载中...'
				})
				// 1.下载到小程序临时内存中 
				const res = await uni.downloadFile({
					url: this.imgDetali.thumb
				})
				const {tempFilePath} = res[1];
				// 2.下载到本地
				const res2 = await uni.saveImageToPhotosAlbum({
					filePath: tempFilePath
				})
				console.log(res2)
				uni.hideLoading()
				if(res2.length === 2){
					uni.showToast({
						title: '下载成功',
						
					})
				}else {
					uni.showToast({
						title: '下载失败',
						icon: "none"
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
 .user_info {
	 display: flex;
	 padding: 20rpx 20rpx;
	 .user_icon {
		 padding-right: 15rpx;
		 image {
			 width: 88rpx;
			 height: 88rpx;
			 border-radius: 50%;
		 }
	 }
	 .user_desc {
		 .user_name {
			 color: #000000;
			 font-size: 26rpx;
			 padding-bottom: 8rpx;
			 font-weight: bold;
		 }
		 .user_time {
			 font-size: 24rpx;
		 }
		 
	 }
 }
 .user_rank {
	 display: flex;
	 justify-content: space-around;
	 
	 padding: 20rpx 0;
	 border-bottom: 1rpx solid #CCCCCC;
	 .iconfont {
		 font-size: 28rpx;
	 }
 }
 .album_wrap {
	 padding: 20rpx;
 }
 .album_title {
	 padding: 10rpx 0;
 }
 .album_item {
	 display: flex;
	 .album_img {
		 flex: 1;
		 image {
			 width: 180rpx;
			 height: 180rpx;
		 }
	 }
	 .album_info {
		 flex: 3;
		 padding-left: 20rpx;
		 .info_text {
			 width: 100rpx;
			 height: 42rpx;
			 color: #FFFDEF;
			 background-color: #f92672;
			 border-radius: 2%;
			 display: flex;
			 justify-content: center;
			 align-items: center;
		 }
		 .info_name {
			 display: flex;
			 justify-content: space-between;
			 padding-top: 15rpx;
			 color: #000000;
		 }
		 
	 }
 }
 .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.comment {
	.comment_title {
		padding: 15rpx;
		align-items: center;
		.iconfont {
			color: red;
			font-size: 40rpx;
		}
		.comment_text {
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
			margin-left: 10rpx;
		}
	}
}
.comment_list {
	padding: 20rpx;
	.comment_item {
		padding: 20rpx 0;
		border-bottom: 4rpx solid #CCCCCC;
		.comment_user_info {
			width: 100%;
			display: flex;

			
			image {
				width: 80rpx;
				height: 60rpx;
				padding-right: 20rpx;
			}
			.comment_user_desc {
				flex: 1;
				.comment_content {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					padding: 20rpx 0;
					color: #000000;
					.iconfont {
						font-size: 26rpx;
					}
				}
			}
			
		}
		
	}
}
.download {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	.download_btn {
		width: 90%;
		height: 80%;
		color: #FFFDEF;
		background-color: #f9273f;
		font-size: 34rpx;
		font-weight: bold;
		display: flex;
		align-content: center;
		justify-content: center;
		line-height: 64rpx;
	}
}
</style>
